<!Doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JavaScript 基础教程 | 菜鸟教程</title>

  <meta name='robots' content='max-image-preview:large' />
<link rel='stylesheet' id='classic-theme-styles-css' href='../0/classic-themes.min.css?ver=6.2' type='text/css' media='all' />
<link rel="canonical" href="../w3cnote/javascript-base-tutorial.html" />
<meta name="keywords" content="JavaScript 基础教程">
<meta name="description" content="JS入门基础      写JS的步骤     希望把某个元素移除的实现     获取元素      事件      如何添加事件     函数     测试     变量            JS的属性操作       HTML属性操作      属性读写操作的注意事项     []中括号的使用       条件判断     数组        for应用      cssText文本格式化与属性操作     按钮点击之后，不再重复功..">
		
	<link rel="shortcut icon" href="https://static.runoob.com/images/favicon.ico">
	<link rel="stylesheet" href="../0/style.css?v=1.170" type="text/css" media="all" />	
	<link rel="stylesheet" href="../0/font-awesome.min.css" media="all" />	
  <!--[if gte IE 9]><!-->
  <script src=""></script>
  <!--<![endif]-->
  <!--[if lt IE 9]>
     <script src=""></script>
     <script src=""></script>
  <![endif]-->
  <link rel="apple-touch-icon" href="https://static.runoob.com/images/icon/mobile-icon.png"/>
  <meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>

<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" placeholder="搜索……" name="s" autocomplete="off">
      
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="../">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        
    <div class="col search search-desktop last">
      <div class="search-input" >
      <form action="//www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" placeholder="搜索……"  autocomplete="off" style="height: 44px;">
      </form>
      
      </div>
    </div>
  </div>
</div>



<!-- 导航栏 -->
<div class="container navigation">
    <div class="row">
        <div class="col nav">
            

                        <ul class="pc-nav" id="note-nav">
                <li><a href="../">首页</a></li>
                <li><a href="../w3cnote">笔记首页</a></li>
                <li><a href="../w3cnote/android-tutorial-intro.html" title="Android 基础入门教程">Android</a></li>
                <li><a href="../w3cnote/es6-tutorial.html" title="ES6 教程">ES6 教程</a></li>
                <li><a href="../w3cnote/ten-sorting-algorithm.html" title="排序算法">排序算法</a></li>
                <li><a href="../w3cnote/hadoop-tutorial.html" title="Hadoop 教程">Hadoop</a></li>
                <li><a href="../w3cnote/zookeeper-tutorial.html" title="Zookeeper 教程">Zookeeper</a></li>
                <li><a href="../w3cnote/verilog-tutorial.html" title="Verilog 教程">Verilog</a></li>
                <li><a href="../w3cnote_genre/code" title="编程技术">编程技术</a></li> 
                <li><a href="../w3cnote_genre/coderlife" title="程序员人生">程序员人生</a></li>
                
                <!--<li><a href="javascript:;" class="runoob-pop">登录</a></li>
                
                
                        <li>
                <a style="font-weight:bold;" href="../linux/linux-tutorial.html#yunserver" target="_blank" onclick="_hmt.push(['_trackEvent', 'aliyun', 'click', 'aliyun'])" title="kkb">云服务器</a>
                </li>
                <li><a href="http://gk.link/a/104mQ" target="_blank" style="font-weight: bold;"onclick="_hmt.push(['_trackEvent', '极客时间', 'click', 'jike'])" title="我的圈子">极客时间</a></li>
            
                
                <li><a target="_blank" href="../shoppinglist" rel="nofollow">知识店铺</a></li> 
        -->
            </ul>
                        
              
            <ul class="mobile-nav">
                <li><a href="../w3cnote">首页</a></li>
                <li><a href="../w3cnote_genre/android" target="_blank" title="Android 基础入门教程">Android</a></li>
                <li><a href="../w3cnote/es6-tutorial.html" target="_blank" title="ES6 教程">ES6</a></li>
                <li><a href="../w3cnote_genre/joke" target="_blank" title="程序员笑话">逗乐</a></li>
                
                <a href="javascript:void(0)" class="search-reveal">Search</a> 
            </ul>
            
        </div>
    </div>
</div>


<!--  内容  -->
<div class="container main">
	<div class="row">

		<div class="col middle-column big-middle-column">
	 			<div class="article">
			<div class="article-heading">
				<h2>JavaScript 基础教程</h2>				<h3><em>分类</em> <a href="../w3cnote_genre/code" title="编程技术" >编程技术</a> </h3>
			</div>
			<div class="article-body note-body">
				<div class="article-intro">
					<ul id="markdown-toc">
    <li>
<a href="#js">JS入门基础</a>
<ul>
    <li><a href="#js-1">写JS的步骤</a></li>
    <li><a href="#section">希望把某个元素移除的实现</a></li>
    <li><a href="#section-1">获取元素</a></li>
    <li>
<a href="#section-2">事件</a>
<ul>
    <li><a href="#section-3">如何添加事件</a></li>
    <li><a href="#section-4">函数</a></li>
    <li><a href="#section-5">测试</a></li>
    <li><a href="#section-6">变量

</a></li>
</ul>
</li>
</ul>
</li>
    <li>
<a href="#js-2">JS的属性操作</a>
<ul>
    <li>
<a href="#html">HTML属性操作</a>
<ul>
    <li><a href="#section-7">属性读写操作的注意事项</a></li>
    <li><a href="#section-8">[]中括号的使用</a></li>
</ul>
</li>
    <li><a href="#section-9">条件判断</a></li>
    <li><a href="#section-10">数组</a></li>
</ul>
</li>
    <li>
<a href="#for">for应用</a>
<ul>
    <li><a href="#csstext">cssText文本格式化与属性操作</a></li>
    <li><a href="#section-11">按钮点击之后，不再重复功能的思路</a></li>
    <li><a href="#thisthis">this指向及this应用</a></li>
</ul>
</li>
    <li>
<a href="#section-12">自定义属性、索引值</a>
<ul>
    <li><a href="#section-13">自定义属性的读写操作</a></li>
    <li><a href="#section-14">自定义属性应用</a></li>
    <li><a href="#section-15">获取自身递增数字及匹配数组内容</a></li>
    <li><a href="#html-1">添加索引值、匹配数组、HTML元素</a></li>
</ul>
</li>
    <li>
<a href="#section-16">数据类型、类型转换</a>
<ul>
    <li><a href="#section-17">数据类型</a></li>
    <li>
<a href="#js-3">JS数据类型转换</a>
<ul>
    <li><a href="#jsnumber">JS方法：Number();</a></li>
    <li><a href="#parseintparsefloat">parseInt与parseFloat</a></li>
</ul>
</li>
    <li><a href="#js-4">JS中稀奇古怪的隐式类型转换</a></li>
    <li><a href="#isnan">isNaN应用实例</a></li>
</ul>
</li>
    <li>
<a href="#section-18">函数传参</a>
<ul>
    <li><a href="#section-19">参数类型判断</a></li>
    <li><a href="#section-20">重用代码步骤</a></li>
</ul>
</li>
    <li>
<a href="#js-5">JS作用域</a>
<ul>
    <li><a href="#js-6">浏览器的"JS解析器"</a></li>
    <li><a href="#section-21">作用域</a></li>
    <li><a href="#section-22">想要获取函数内的值</a></li>
</ul>
</li>
    <li>
<a href="#section-23">运算符</a>
<ul>
    <li><a href="#section-24">算术</a></li>
    <li><a href="#section-25">赋值</a></li>
    <li><a href="#section-26">关系</a></li>
    <li><a href="#section-27">逻辑</a></li>
    <li><a href="#section-28">运算优先级</a></li>
</ul>
</li>
    <li>
<a href="#section-29">程序流程控制</a>
<ul>
    <li><a href="#section-30">判断</a></li>
    <li><a href="#section-31">循环</a></li>
    <li><a href="#section-32">跳出、跳过</a></li>
    <li><a href="#section-33">什么是真，什么是假</a></li>
</ul>
</li>
    <li>
<a href="#return">函数返回值-return详解及应用</a>
<ul>
    <li><a href="#arguments">arguments</a></li>
    <li><a href="#currentstylegetcomputedstyle">currentStyle与getComputedStyle应用</a></li>
</ul>
</li>
    <li>
<a href="#section-34">定时器</a>
<ul>
    <li><a href="#setinterval">setInterval</a></li>
    <li><a href="#settimeout">setTimeout</a></li>
    <li>
<a href="#section-35">定时器的小应用（函数封装和回调函数）</a>
<ul>
    <li><a href="#domove">doMove的函数封装</a></li>
    <li><a href="#section-36">抖动的函数封装</a></li>
</ul>
</li>
</ul>
</li>
    <li>
<a href="#section-37">系统时间对象</a>
<ul>
    <li><a href="#date">Date对象参数</a></li>
    <li><a href="#section-38">时间戳</a></li>
</ul>
</li>
    <li>
<a href="#section-39">字符串操作</a>
<ul>
    <li><a href="#section-40">字符串获取类、封装检测数字的方法</a></li>
    <li><a href="#indexoflastindexof">indexOf、lastIndexOf</a></li>
    <li><a href="#section-41">比较类、截取类</a></li>
    <li><a href="#split">大小写转换、split分割字符串</a></li>
    <li><a href="#section-42">字符串操作总结</a></li>
</ul>
</li>
    <li>
<a href="#section-43">数组的操作</a>
<ul>
    <li><a href="#json">json数据格式及语法</a></li>
    <li><a href="#for-injson">for-in循环，遍历json</a></li>
    <li><a href="#section-44">清空数组和清空数组效率问题</a></li>
    <li>
<a href="#section-45">数组的操作</a>
<ul>
    <li><a href="#section-46">数组去重</a></li>
    <li><a href="#section-47">随机数以及随机公式推理过程</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<img decoding="async" src="//www.runoob.com/wp-content/uploads/2015/06/94_111122114208_1.png" alt="94_111122114208_1" width="402" height="194" class="alignnone size-full wp-image-11997" srcset="http://www.runoob.com/wp-content/uploads/2015/06/94_111122114208_1.png 402w, http://www.runoob.com/wp-content/uploads/2015/06/94_111122114208_1-300x145.png 300w" sizes="(max-width: 402px) 100vw, 402px" />
<h2 id="js">JS入门基础</h2>
<h3 id="js-1">写JS的步骤</h3>
<ol>
    <li>先实现布局</li>
    <li>想出实现原理</li>
    <li>了解JS语法</li>
</ol>
<h3 id="section">希望把某个元素移除的实现</h3>
<ul>
    <li>display: none; 显示为无</li>
    <li>visibility: hidden; 隐藏</li>
    <li>width \ height</li>
    <li>透明度</li>
    <li>left \ top</li>
    <li>拿与背景色相同的div盖住该元素</li>
    <li>利用margin值</li>
    <li>……</li>
</ul>
<h3 id="section-1">获取元素</h3>
<ul>
    <li>getElementById() ——静态方法，前面只能跟document</li>
    <li>document.body、document.title 页面中只有一个的元素</li>
    <li>getElementsByTagName() ——动态方法，前面可以跟document也可以跟其他元素，返回的是一个类似数组的元素的集合
<ul>
    <li>有类似数组的length</li>
    <li>有类似数组的应用方式，比如ali[0]</li>
    <li>在用TagName的时候，必须要加上中括号[]</li>
    <li>所谓的动态方法，是指通过js动态添加的元素，getElementsByTagName()也可以找到，但是document.getElementById是找不到的</li>
</ul>
</li>
</ul>
<h3 id="section-2">事件</h3>
事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件
<ul>
    <li>onclick</li>
    <li>onmouseover</li>
    <li>onmousedown</li>
    <li>onmouseout</li>
    <li>onmouseup</li>
    <li>onmousemove</li>
    <li>……</li>
</ul>
<h3 id="section-3">如何添加事件</h3>
<ul>
    <li>元素.onmouseover</li>
</ul>
<h3 id="section-4">函数</h3>
函数可以理解为命令，做一些事情，如:

function abc() { //肯定不会主动执行！ … }
<ol>
    <li>直接调用：abc();</li>
    <li>事件调用：元素.事件 = 函数名 (oDiv.onclick = abc;)</li>
    <li>……</li>
</ol>
function(){} 匿名函数

元素.事件 = function(){}
<h3 id="section-5">测试</h3>
<ul>
    <li>alert(1); 带确定按钮的警告框；alert('ok'); 'ok' 字符串</li>
    <li>初学者：最好保持随时写，随时测试的习惯</li>
</ul>
<h3 id="section-6">变量</h3>
<ul>
    <li>var li = document.getElementById('lis');</li>
    <li>var num = 123;</li>
    <li>var name = 'leo';</li>
</ul>
<h2 id="js-2">JS的属性操作</h2>
<h3 id="html">HTML属性操作</h3>
<ul>
    <li>属性名</li>
    <li>属性值</li>
    <li>属性的读操作：获取、找到
<ul>
    <li>元素.属性名</li>
</ul>
</li>
    <li>属性的写操作：替换、修改
<ul>
    <li>元素.属性名 ＝ 新的值</li>
    <li>添加的话，需要用 +=</li>
</ul>
</li>
    <li>innerHTML 读取元素内的所有HTML代码</li>
</ul>
字符串连接：加号
<h3 id="section-7">属性读写操作的注意事项</h3>
<ul>
    <li>JS属性中不允许出现"-"，例如font-size改为fontSize</li>
    <li>class在js里面是保留字，在js作用class要用className</li>
    <li>所有的相对路径都别拿来做判断（如img的src、还有href）</li>
    <li>颜色值不要拿来做判断（因为有red、#f00、rgb(250, 0, 0)等写法</li>
    <li>相对路径也不要拿来做判断</li>
    <li>innerHTML的值别拿来做判断</li>
    <li>IE6、IE7、IE8中表单元素的type更改不了，不支持，会报错；其他的都可以。</li>
    <li>在有些浏览器中，直接更改float值可能不支持。在js中，可以用IE(styleFloat)和非IE(cssFloat)来区别对待。</li>
    <li>不能用来做判断的东西，可以创造一个开关，利用布尔值来实现</li>
</ul>
关于兼容：
<ul>
    <li>技术上：必须能做到掌握兼容性（兼容性问题的解决方案）</li>
    <li>需求上：商量着来（提供最准确的呈现方案）</li>
</ul>
<h3 id="section-8">[]中括号的使用</h3>
<ul>
    <li>点"."后面的值无法修改</li>
    <li>中括号[]里面的值可以修改；JS中允许把"."替换成"[]"</li>
</ul>
<h3 id="section-9">条件判断</h3>
<ul>
    <li>if(条件){……};</li>
    <li>if(条件){……} else {……};</li>
    <li>if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};</li>
</ul>
<h3 id="section-10">数组</h3>
<ul>
    <li>"放数据的仓库"</li>
    <li>中括号[]，半角都好分隔，最后一个数据后面不要加逗号</li>
    <li>数组的length属性</li>
    <li>为数组最后塞东西用push();</li>
</ul>
<h2 id="for">for应用</h2>
for循环的使用场景：
<ul>
    <li>如果想要重复执行某些代码</li>
    <li>每次执行的时候，有个数字在变化</li>
</ul>
for循环的执行顺序：1→234→234……
<ol>
    <li>var i = 0;</li>
    <li>i < 3; 关键步骤</li>
    <li>括号里面的所有代码</li>
    <li>i++</li>
</ol>
注意下面这样一个循环：
<pre>for (var i=0; i&lt;aLi.length; i++) {
  aLi[i].onclick = function(){
    alert(i);
  }
}
</pre>
以上代码会弹出一个3，而不是一次0、1、2；这里注意，如果在for循环里面包了一个函数，函数里面用了i，那么由于作用域的关系，i不会像你想象的那样逐次增加。
<h3 id="csstext">cssText文本格式化与属性操作</h3>
<ul>
    <li>oDiv.style.cssText = 'width: 200px; height: 200px;';</li>
    <li>cssText不会动head的style中的设置；但是会改变行间样式（注意，是替换行间样式，而非新增行间样式）</li>
</ul>
<h3 id="section-11">按钮点击之后，不再重复功能的思路</h3>
<ol>
    <li>找按钮的麻烦，比如点击一次之后，设置oBtn.disabled = true;</li>
    <li>继续找按钮的麻烦，比如点击一次后，将按钮隐藏oBtn.style.display = 'none';</li>
    <li>将按钮添加的东西清空，然后再添加一次，先清空再生成</li>
    <li>用判断</li>
</ol>
<h3 id="thisthis">this指向及this应用</h3>
window是js中的"老大"
<pre>function fn1(){
    alert(this);
}
fn1();
</pre>
上述代码中执行函数fn1()相当于window.fn1();因此，在函数体内弹出这个this仍然是window。
<pre>function fn1(){
    alert(this);
}
oBtn.onclick = fn1;
</pre>
上述用按钮的点击事件调用的fn1函数，最终弹出来的是这个按钮，而不是window。
<pre>function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    alert(this)
}
</pre>
上述代码，点击按钮弹出的this仍然是oBtn这个按钮。
<pre>function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    fn1();
}
</pre>
上述代码，点击oBtn按钮，弹出的就不再是oBtn这个对象，而是window。
<pre>&lt;input id="btn2" type="button" value="按钮2" onclick="alert(this)" /&gt;
</pre>
上述代码是行间事件，弹出的this就是这个按钮btn2。
<pre>function fn1(){
    alert(this);
}
&lt;input id="btn2" type="button" onclick="fn1();" value="按钮2&rdquo; /&gt;
</pre>
上述代码中，弹出的this就是window。
<ul>
    <li>this: 调用当前方法（函数）的那个对象</li>
</ul>
<pre>function fn1(){
    this
}

fn1(); this ＝&gt; window

oDiv.onclick = fn1; this =&gt; oDiv

oDiv.onclick = function(){
    this =&gt; oDiv
};

oDiv.onclick = function(){
    fn1(); fn1()里面的this =&gt; window
}

&lt;div onclick="  this  "&gt;&lt;/div&gt; this =&gt; div

&lt;div onclick = "  fn1();  "&gt;&lt;/div&gt;  fn1()里面的this =&gt; window
</pre>
<pre>&lt;script&gt;

fn1(this);
function fn1(obj){
  obj =&gt; window
}

oDiv.onclick = function(){
  this
  fn1(this);
};
function fn1(obj){ obj =&gt; oDiv }

&lt;/script&gt;
</pre>
<pre>&lt;input type="button" value="按钮1" /&gt;
&lt;input type="button" value="按钮2" /&gt;
&lt;input type="button" value="按钮3" /&gt;

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  for(var i=0; i&lt;aBtn.length; i++) {
    aBtn[i].onclick = function(){
      this.style.background = 'yellow';
    }
  }
}
</pre>
上述代码的作用与下面这段代码的作用等价，注意that的使用方法。
<pre>&lt;input type="button" value="按钮1" /&gt;
&lt;input type="button" value="按钮2" /&gt;
&lt;input type="button" value="按钮3" /&gt;

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var that = null; 
  
  for(var i=0; i&lt;aBtn.length; i++) {
    aBtn[i].onclick = function(){
      that = this;
      fn1();
    };
  }
  function fn1(){
    //this =&gt; window
    that.style.background = 'yellow';
  }
}
</pre>
上述代码还等价于下面这段代码：
<pre>&lt;input type="button" value="按钮1" /&gt;
&lt;input type="button" value="按钮2" /&gt;
&lt;input type="button" value="按钮3" /&gt;

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  for(var i=0; i&lt;a.aBtn.length; i++) {
    aBtn[i].onclick = fn1; //注意不要在fn1后面加括号
  }
  
  function fn1(){
    this.style.background = 'yellow';
  }
}
</pre>
<h2 id="section-12">自定义属性、索引值</h2>
<h3 id="section-13">自定义属性的读写操作</h3>
<pre>window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  aBtn[0].abc = 123; //自定义属性
  
  // alert(aBtn[0].abc); 自定义属性的读
  // aBtn[0].abc = 456; 自定义属性的写
}
</pre>
JS可以为任何HTML元素添加任意个自定义属性
<h3 id="section-14">自定义属性应用</h3>
用自定义属性可以元素添加开关属性，作为控制开关。如下面这个例子：
<pre>window.onload = function(){
  var aLi = document.getElementsByTagName('li');
  // var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关，就要给每个元素加个onOff开关。
  
  for(var i=0; i&lt;aLi.length; i++) {
    aLi[i].onOff = true;
    aLi[i].onclick = function(){
      if (this.onOff){
        this.style.background = 'url(img/active.png)';
        this.onOff = false;
      } else {
        this.style.background = 'url(img/normal.png)';
        this.onOff = true;
      }
    }
  }
}
</pre>
<h3 id="section-15">获取自身递增数字及匹配数组内容</h3>
在网页上设置三个按钮，默认值为0，每点击一次按钮，字母依次ABCD轮换。
<pre>&lt;input type="button" value="0" /&gt;
&lt;input type="button" value="0" /&gt;
&lt;input type="button" value="0" /&gt;
</pre>
<pre>  var aBtn = document.getElementsByTagName('input');
  var arr = ['A', 'B', 'C', 'D'];
  
  for(var i=0; i&lt;aBtn.length; i++){
    aBtn[i].num = 0;
    aBtn[i].onclick = function(){
      this.value = arr[this.num]
      this.num++;
      if(this.num === arr.length){
        this.num = 0;
      };
    };
  };
</pre>
<h3 id="html-1">添加索引值、匹配数组、HTML元素</h3>
把三个按钮的value与数组里面的值依次进行匹配。
<pre>&lt;input type="button" value="btn1" /&gt;
&lt;input type="button" value="btn2" /&gt;
&lt;input type="button" value="btn3" /&gt;
</pre>
<pre>window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var arr = ['莫涛','张森','杜鹏'];
  
  for(var i=0; i&lt;aBtn.length; i++){
    aBtn[i].index = i; //自定义属性index，添加索引值
    aBtn[i].onclick = function(){
      //alert(i); //不会弹出1、2，直接弹出3，也就是aBtn的长度。也就是说，在基础阶段，在for循环所包的函数里面再用i是不靠谱的。
      this.value = arr[this.index];
    };
  };
}
</pre>
上面是通过索引值匹配数组值，匹配HTML中的元素也是同理。

想建立"匹配"、"对应"关系，就用索引值。
<h2 id="section-16">数据类型、类型转换</h2>
<strong>ECMAScript：</strong>标准、核心
<h3 id="section-17">数据类型</h3>
<ul>
    <li>HTML标签类型：
<ul>
    <li>block</li>
    <li>inline</li>
    <li>inline-block</li>
    <li>table</li>
    <li>……</li>
</ul>
</li>
    <li>JS中的数据类型：
<ul>
    <li>数字（NaN属于数字类型）</li>
    <li>字符串</li>
    <li>布尔值</li>
    <li>函数类型</li>
    <li>对象
<ul>
    <li>obj</li>
    <li>[]</li>
    <li>{}</li>
    <li>null （空是不能添加自定义属性的）</li>
</ul>
</li>
    <li>未定义 undefined</li>
</ul>
</li>
</ul>
typeof用来判断数据类型。

字符串方法charAt()：通过字符串的下标获取子字符串。

对象可以添加自定义属性。如果把函数扔给了对象，就给该对象添加了一个方法。
<h3 id="js-3">JS数据类型转换</h3>
把字符串转成数字的方法：
<h3 id="jsnumber">JS方法：Number();</h3>
<pre>var a = '100';
alert(a + 100); //'100100'

var b = '00100';
alert(Number(b)); //100

var c = '+100';
alert(Number(c)); //100

var d = '';
alert(Number(d)); //0

var e = '   ';
alert(Number(e)); //0

var f = true;
alert(Number(f)); //1

var g = false;
alert(Number(g)); //0

var i = [];
alert(Number(i)); //0 空数组用Number转出来是0

var j = [''];
alert(Number(j)); //0

var k = [123];
alert(Number(k)); //123

var l = ['123'];
alert(Number(l)); //123

var o = null;
alert(Number(o)); //0

----------------------------
var m = [1,2,3];
alert(Number(m)); //NaN

var json = {abc:123};
alert(Number(json)); //NaN

var json2 = {};
alert(Number(json2)); //NaN 即使是空json，Number方法也转不了

var h = function(){};
alert(Number(h)); //NaN

var p;
alert(Number(p)); //undefined 

var q = '100px';
alert(Number(q)); // NaN
</pre>
<h3 id="parseintparsefloat">parseInt与parseFloat</h3>
<pre>var a = '100px';
alert(parseInt(a)); //100

var b = '100px123456789';
alert(parseInt(b)); //100

var d = '-100px';
alert(parseInt(d)); //-100 parseInt还是认加减号的

var e = '   100px';
alert(parseInt(e)); //100 parseInt也是认空格的

var f = '000000100px';
alert(parseInt(f)); //100

var g = '12.34元';
alert(parseInt(g)); //12 parseInt只能转出整数
------------------------------
var c = true;
alert(parseInt(c)); //NaN

//parseInt也不能用于转函数等

</pre>
parseInt()方法还有一个参数，就是按照几进制来转，比如parseInt(a, 10);表示按照十进制来转；parseInt(b, 2);表示按照二进制来转。
<pre>var a = '12.34元';
alert(parseFloat(a)); //12.34

var b = '12.3.4元';
alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点
</pre>
<strong>parseInt和parseFloat的配合使用</strong>，可以来判断某个值是整数还是小数，如下：
<pre>var num = '200.345';
if(parseInt(num) == parseFloat(num)) {
  alert(num + '是整数');
} else {
  alert(num + '是小数');
}
</pre>
<h3 id="js-4">JS中稀奇古怪的隐式类型转换</h3>
显式类型转换（强制类型转换）：
<ul>
    <li>Number();</li>
    <li>parseInt();</li>
    <li>parseFloat();</li>
</ul>
隐式类型转换：
<ul>
    <li>- * \/ \% 减、乘、除、取模可以将字符串转成数字</li>
    <li>+ 加号可以将数字转成字符串</li>
    <li>++ -- 加加、减减运算符可以把字符串转成数字</li>
    <li>< > 大于号、小于号可以把字符串转成数字，一定要注意是进行数字的比较还是字符串的比较</li>
    <li>! 取反 把右边的数据类型转成布尔值</li>
    <li>==</li>
</ul>
<pre>alert('200' - 3); //197
alert(200 + '3'); //2003

var a = '10';
a++;
alert(a); //11

alert('10'&gt;9); //true
alert('1000000'&gt;'9'); //false
//注意：数字的比较和字符串的比较不同；字符串的比较是一位一位的比较。

alert(!'ok'); //false
alert(!100); //false

alert('2' == 2); //true
alert('2' === 2); //false 三个等号不仅判断值，还会先判断两者的类型
</pre>
隐式类型转换转不出来，也会返回一个NaN，例如：alert('……' - 9);就会弹出NaN。
<h3 id="isnan">isNaN应用实例</h3>
NaN: (not a number)。Nan是个不是数字的数字类型。所有的数字都是数字类型，但不是所有的数字类型都是数字。
<ul>
    <li>NaN是个数字类型，但它不是个数字。</li>
    <li>一旦写程序中出现了NaN，肯定说明进行了非法的运算操作。</li>
    <li>NaN是个false。</li>
    <li>NaN与自己都不相等。</li>
</ul>
<pre>var a = Number('abc');
//alert(a); //NaN
//alert(typeof(a)); //number

if(a) { //会弹出&lsquo;假&rsquo;，说明NaN是false
  alert('真');
} else {
  alert('假');
}

//alert(a === a); //false NaN比较，比出false
</pre>
<strong>isNaN：</strong>is not a Number 是不是不是个数字（不是数字）。

isNaN();是个方法，用来干活的。
<ul>
    <li>帮助判断某些值是不是数字。</li>
    <li>不喜欢数字、讨厌数字(不是讨厌数字类型，isNaN遇到NaN就很喜欢，会返回true，但是NaN就是个数字类型) 用来判断数字。如alert(isNaN(2)); 返回false。alert(isNaN('我爱你')); 返回true。alert(isNaN(function(){})); 返回true。</li>
</ul>
isNaN的判断过程，将括号里面的东西扔给Number，Number转出来数字，就返回false；转不出来就返回true。
<pre>alert(isNaN('250'));
//Number() '250' =&gt; 250 =&gt; false

alert(isNaN(true));
//Number() true =&gt; 1 =&gt; false

alert(isNaN([]));
//Number() [] =&gt; 0 =&gt; false
</pre>
下面是一个isNaN的小应用：
<pre>&lt;input type="text" /&gt;
&lt;input type="button" value="判断输入值是不是数字" /&gt;
</pre>
<pre>window.onload = function(){
  var aInp = document.getElementsByTagName('input');
  var str = '';
  
  aInp[1].onclick = function(){
    str = aInp[0].value
    //alert(type of str); //总是返回string 从HTML中拿到的内容，类型都是字符串
    
    if(isNaN(str)){
      alert(str + '不是数字');
    } else {
      alert(str + '是数字');
    }
  }
}
</pre>
<h2 id="section-18">函数传参</h2>
参数 ＝ JS的数据类型：
<ul>
    <li>数字</li>
    <li>字符串</li>
    <li>布尔值</li>
    <li>函数</li>
    <li>对象</li>
    <li>未定义</li>
</ul>
<h3 id="section-19">参数类型判断</h3>
<pre>fn1(100);
fn1('miaov');
fn1(function(){alert(1);});

function fn1(a){
  if(typeof a === 'number' &amp;amp;&amp;amp; a === a) {
    alert(a+20);
  } else if (typeof a === 'string'){
    alert(a.charAt(2));
  } else if (typeof a === 'function'){
    a();
  }
}
</pre>
<h3 id="section-20">重用代码步骤</h3>
<ol>
    <li>尽量保证HTML代码结构一致，可以通过父级选取子元素</li>
    <li>把核心的主程序实现，用函数包起来</li>
    <li>把每组里不同的值找出来，通过传参实现</li>
</ol>
<h2 id="js-5">JS作用域</h2>
<strong>什么是作用域</strong>
<ul>
    <li>域：空间、范围、区域</li>
    <li>作用：读、写</li>
</ul>
<h3 id="js-6">浏览器的"JS解析器"</h3>
"JS解析器"：浏览器中专门用来读JS的程序。它至少做下面两件事（当然还有其他事情）：
<ol>
    <li>准备工作（"找一些东西"）：根据var、function、参数找东西 —— <strong>JS的预解析</strong>

a = 未定义 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1 = function fn1(){alert(2);} 所有的函数，在正式运行代码之前，都是整个函数块

遇到重名的，只留一个</li>
    <li>逐行解读代码 每读一行，就会回到预解析的库里面去看一眼。 碰上表达式（带有 = + - * / % ++ – ! 参数……都是表达式）能够改变值的是表达式。碰上表达式，就到库里面去修改值。</li>
</ol>
<pre>alert(a); //未定义
var a=1; //在库里面a的值由未定义换成1
function fn1(){alert(2);}
</pre>
<pre>alert(a); //弹出：function a(){alert(4);}
var a=1; //预解析中的a改为了1
alert(a);  //弹出1
function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。
alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。
var a=3; //预处理中a的值变为3
alert(a); //弹出3
function a(){alert(4);} //函数声明，什么也没有发生
alert(a); //继续弹出3
a(); //报错 a is not a function
</pre>
以上代码在预解析中的过程如下：

1）预解析： var function 参数 …… 读到 var a = 1 => a 未定义 读到 function a(){alert(2);} => a = functiona(){alert(2);} 变量与函数重名了，就只留下函数： a = function(){alert(2);} 读到 var a = 3 => a 未定义，这里与上面名为a的函数重名了，所以还是保留a = function(){alert(2);} 读到function a(){alert(4);} => a = function a(){alert(4);} 与前面的 a = function(){alert(2);}重名，根据上下文，后面的函数覆盖了前面的函数，所以预解析就只留下了 a = function(){alert(4);} 2）逐行解读代码 读到表达式，表达式可以修改预解析的值。参数也可以改变预解析的值。 遇到函数调用，又要做两件事：预解析、逐行解析代码 函数声明，不是表达式，不改变预解析里面的值。
<h3 id="section-21">作用域</h3>
<ul>
    <li>在&lt;script&gt;标签里面声明的函数和变量，都是全局函数和全局变量（但是js解析器要把一块的事情处理完，然后处理另外一块事情）<strong>自上而下</strong>
</li>
    <li>函数：函数也是个域，也是先找后执行。<strong>由里到外</strong>
</li>
    <li>对象 {}</li>
</ul>
<strong>作用域链</strong>：从子级作用域跳到父级作用域的过程
<pre>&lt;script&gt;
alert(a); //报错：a is not defined。因为在预解析里面压根就没有a这个东西
&lt;/script&gt;

...

&lt;script&gt;
var a = 1;
&lt;/script&gt;
</pre>
<pre>&lt;script&gt;
alert(a); //不报错，会弹出undefined。因为预解析里面有a这个东西，但是由于执行的时候，还没有改变a的值，因此a的值为undefined
var a = 1;
&lt;/script&gt;

...

&lt;script&gt;
&lt;/script&gt;
</pre>
<pre>&lt;script&gt;
var a = 1; //预解析里面存了a，并且a的值存为1
&lt;/script&gt;

...

&lt;script&gt;
alert(a); //弹出1
&lt;/script&gt;
</pre>
<pre>var a = 1; //预处理中的全局变量a的值改为1
function fn1(){
    alert(a);
    var a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，先预解析出一个局部的 a 是未定义（局部的a与全局的a一点关系都没有）；然后读代码，alert(a)弹出的是undefined；然后继续执行，遇到表达式，将局部的变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1
</pre>
以上代码在js解析器中的模拟如下：

1）预解析 var function 参数…… a = … fn1 = function fn1(){ alert(a); var a=2; } 2) 逐行解析代码

另外一段代码：
<pre>var a = 1; //预处理中的全局变量a的值改为1
function fn1(){
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，没有任何函数和变量声明，因此预解析里面没东西；然后读代码，alert(a)，在局部没有找到预解析的a，于是从子级作用域跳到父级作用域去找，找到了全局的a，所以弹出的是全局变量a的值1；然后继续执行，遇到表达式，将全局变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为2
</pre>
<pre>var a = 1; //预处理中的全局变量a的值改为1
function fn1(a){ //参数本质上就是一个局部变量
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，找到参数a，因此预处理里面有个局部的a是未定义。；然后读代码，alert(a)，弹出的是局部的a为undefined；然后继续执行，遇到表达式，将局部变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1
</pre>
<pre>var a = 1; //预处理中的全局变量a的值改为1
function fn1(a){ //参数本质上就是一个局部变量
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(a); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，找到局部参数a，因此预处理里面有个局部的a是未定义。；然后读代码，读到第一行function fn1(a)，这时有参数进来，把全局的a的值1赋给了局部变量a，这时局部变量a的值变为1，alert(a)，弹出的是局部的a为1；然后继续执行，遇到表达式，将局部变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1
</pre>
<h3 id="section-22">想要获取函数内的值</h3>
<ul>
    <li>方法一、把全局变量用到函数里面。因为函数可以读写全局变量。见下面的代码：</li>
</ul>
<pre>var str = '';
function fn1(){
    var a = '大鸡腿~';
    str = a;
}
fn1();
</pre>
<ul>
    <li>方法二，在函数里面调用全局函数，通过传参实现，见下面代码：</li>
</ul>
<pre>function fn2(){
    var a = '99999999克拉钻石';
    fn3(a);
}
fn2();
function fn3(a){ //注意这个a是fn3里面的，与fn2里面的a毫无关系
    alert(a);
}
</pre>
<strong>注意事项</strong>

函数的大括号是作用域；if(){}不是作用域；for(){}也不是作用域。只有作用域是先预解析、再执行。if和for的大括号没有预解析过程。
<pre>alert(a); //弹出undefined。这说明if大括号中的a已经在全局就被预解析了，因此if的大括号并不是作用域
if(true){
    var a=1;
}
</pre>
但是，需要注意：
<pre>alert(fn1); //在火狐浏览器里面会报错说fn1 is not defined。但是在chrome浏览器里可以正常弹出fun1函数。

if(true){
    var a = 1;
    function fn1(){
        alert(123);
    }
}
</pre>
只有火狐浏览器预解析时，不能对if或for的括号里括起来的函数进行预解析。因此存在兼容性问题。因此，如果想要定义全局函数或全局变量，尽量不要放到if和for的大括号里面，放到大括号外面。
<pre>for(var i=0; i&lt;aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //弹出3。因为必须for循环全部执行完成之后，aBtn才能够点击。但是for循环执行完了，外面的i已经变成3；但是在function里面又没有i，自然找到了外面的i，也就是3.
    }
}
</pre>
<pre>for(var i=0; i&lt;aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //这时候弹出的就不是3了，是undefined
        
        for(var i=0; i&lt;aBtn.legnth; i++){
            aBtn[i].style.background = 'yellow';
        }
    }
}
</pre>
<pre>for(var i=0; i&lt;aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //下面for循环的括号中的var删去了，function里面又找不到i了，所以到父级找到了i，又是个3。因此，此处会弹出3。
        
        for (i = 0; i&lt;aBtn.length; i++){
            aBtn[i].style.background = 'yellow';
        }
    }
}
</pre>
<h2 id="section-23">运算符</h2>
<h3 id="section-24">算术</h3>
<ul>
    <li>+ 加</li>
    <li>- 减</li>
    <li>* 乘</li>
    <li>/ 除</li>
    <li>% 取模（求余数）</li>
</ul>
<h3 id="section-25">赋值</h3>
<ul>
    <li>=</li>
    <li>+=</li>
    <li>-=</li>
    <li>*=</li>
    <li>/=</li>
    <li>%=</li>
</ul>
<h3 id="section-26">关系</h3>
<ul>
    <li><</li>
    <li>></li>
    <li><=</li>
    <li>>=</li>
    <li>==</li>
    <li>!=</li>
    <li>===</li>
    <li>!===</li>
</ul>
<h3 id="section-27">逻辑</h3>
<ul>
    <li>&amp;&amp; 与</li>
    <li>|| 或</li>
    <li>! 否</li>
</ul>
<h3 id="section-28">运算优先级</h3>
<ul>
    <li>括号</li>
</ul>
<h2 id="section-29">程序流程控制</h2>
<h3 id="section-30">判断</h3>
<ul>
    <li>if</li>
    <li>switch (case break default)</li>
    <li>?:</li>
</ul>
<h3 id="section-31">循环</h3>
<ul>
    <li>while</li>
    <li>for</li>
</ul>
<h3 id="section-32">跳出、跳过</h3>
<ul>
    <li>break</li>
    <li>continue</li>
</ul>
<h3 id="section-33">什么是真，什么是假</h3>
<ul>
    <li>真：非零的数字、字符串、true、函数、object：[] {} 能找到的元素</li>
    <li>假：零、NaN、空字符串、false、null、未定义、不能找到的元素</li>
</ul>
<h2 id="return">函数返回值-return详解及应用</h2>
<ul>
    <li>return 返回值：函数名+括号（例如fn1())就相当于得到了该函数里面return后面的值</li>
    <li>所有函数默认返回值是：undefined</li>
    <li>可返回：数字、字符串、布尔、函数、对象（元素、[]、{}、null）、未定义</li>
    <li>return后面的任何代码都不执行了</li>
</ul>
<pre>alert fn1();
function fn1(){
    return function(){
        alert(1);
    }
}
</pre>
此时弹出的是：function(){alert(1);}
<pre>alert fn1()();
function fn1(){
    return function(){
        alert(1);
    }
}
</pre>
此时弹出的是1，也就是return的匿名函数执行的结果。
<pre>alert fn1()(10);
function fn1(){
    return function(a){
        alert(a);
    }
}
</pre>
此时弹出的是10。
<pre>alert fn1(20)(10);
function fn1(a){
    return function(b){
        alert(a + b);
    }
}
</pre>
此时弹出的是30。
<h3 id="arguments">arguments</h3>
fn1(1, 2, 3); //实参——实际传递的参数

function fn1(a, b, c) //形参——形式上，a、b、c这些名代表1、2、3

如果不写形参，1、2、3也能够传进来，都存在arguments的肚子里。

function fn1(){ //arguments => [1, 2, 3] —— 实参的集合（不是数组，但是类似数组，有length，也可以用下标找到其中的数据） }

当函数参数个数无法确定的时候，用arguments：
<pre>alert(sum(1,2,3));
function sum(){
    var n=0;
    for(var i=0; i&lt;arguments.length; i++){
        n += arguments[i];
    }
    return n;
}
</pre>
<pre>var a=1;
function fn2(a){ //arguments的某个数值就相当于某个形参
    arguments[0]=3;
    alert(a); //弹出3
    var a=2;
    alert(arguments[0]); //弹出2
}
fn2(a);
alert(a); //弹出1
</pre>
<h3 id="currentstylegetcomputedstyle">currentStyle与getComputedStyle应用</h3>
<ul>
    <li>getComputedStyle获取的是计算机（浏览器）计算后的样式，但是不兼容IE6、7、8</li>
    <li>currentStyle方法兼容IE6、7、8，但是不兼容标准浏览器</li>
</ul>
属性判断法、版本检测法来解决浏览器间的兼容性问题 ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr]; } ~~~

<strong>注意事项：</strong>
<ul>
    <li>如果用以上的方法获取某个元素的复合样式，例如background，那么就不要用上面那种方式获取，在不同浏览器间有兼容性问题。用上面的方法获得单一样式，而不要用来获取复合样式。</li>
    <li>使用以上方法，注意不要多按空格</li>
    <li>使用以上方法，不要获取未设置后的样式，因为浏览器间不兼容</li>
    <li>在火狐4.0之前，有个bug，如果getComputedStyle后面不跟参数，会出现问题，所以有些人写成getComputedStyle(obj, false)，那个false就是为了解决这个bug。这里的bug也可以写成0，或者其他任何参数都可以。不过目前火狐的浏览器都比较高，因此这个问题已经不是很常见了。</li>
</ul>
<h2 id="section-34">定时器</h2>
<h3 id="setinterval">setInterval</h3>
setInterval(函数, 毫秒); 重复执行（发动机）
<pre>var i=0;
function fn1(){
    document.title = i;
    i++;
}
setInterval(fn1, 1000);
</pre>
<strong>事件调用的方法</strong>
<ul>
    <li>fn1(); 直接调用</li>
    <li>document.onclick = fn1; 事件调用</li>
    <li>setInterval(fn1, 1000); 函数调用</li>
</ul>
<strong>clearInterval</strong>
<pre>var timer = setInterval(函数, 毫秒); //重复执行
clearInterval(timer); //清除定时器
</pre>
<pre>var i=0,
    timer = null;
function fn1(){
    i++;    
    document.title = i;
    
    if(i===10){
        clearInterval(timer);
    }
}
timer = setInterval(fn1, 1000);
</pre>
<strong>注意</strong>

定时器如果是由事件控制的，比如按钮的onclick控制的，那么一定要遵循一个原则，先关后开。这样可以避免连续点击多次按钮，重复设置定时器。另外，clearInterval()不论里面填的是一个timer，还是null还是未定义，都可以顺利运行。
<h3 id="settimeout">setTimeout</h3>
var timer = setTimeout(函数, 毫秒); 执行一次（炸弹）

clearTimeout(timer);
<h3 id="section-35">定时器的小应用（函数封装和回调函数）</h3>
<h3 id="domove">doMove的函数封装</h3>
<pre>&lt;input id="btn1" type="button" value="走" /&gt;
&lt;div id="div1"&gt;&lt;/div&gt;
</pre>
<pre>var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    doMove ( oDiv, 'left', 12, 900, function () {
        doMove ( oDiv, 'top', 34, 500 );
    });

};

//doMove函数封装

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) &lt; target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;          // 步长
        
        if ( speed &gt; target &amp;amp;&amp;amp; dir &gt; 0 ||  speed &lt; target &amp;amp;&amp;amp; dir &lt; 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn &amp;amp;&amp;amp; endFn();
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { 
    return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 
}
</pre>
<h3 id="section-36">抖动的函数封装</h3>
<pre>&lt;img decoding="async" id="img1" src="img/4.jpg" /&gt;
&lt;img decoding="async" id="img2" src="img/5.jpg" /&gt;
</pre>
<pre>window.onload = function () {
    var oImg1 = document.getElementById('img1');
    var oImg2 = document.getElementById('img2');
    
    oImg1.onclick = fnShake;
    oImg2.onclick = fnShake;
    
    function fnShake() {
        var _this = this;
        shake( _this, 'left', function(){
            shake( _this, 'top' );
        });
    }

};

function shake ( obj, attr, endFn ) {
    var pos = parseInt( getStyle(obj, attr) ); //有隐患 需要解决
    var arr = [];           // 20, -20, 18, -18 ..... 0
    var num = 0;
    var timer = null;
        
    for ( var i=20; i&gt;0; i-=2 ) {
        arr.push( i, -i );
    }
    arr.push(0);
        
    clearInterval( obj.shake );
    obj.shake = setInterval(function (){
        obj.style[attr] = pos + arr[num] + 'px';
        num++;
        if ( num === arr.length ) {
            clearInterval( obj.shake );
            endFn &amp;amp;&amp;amp; endFn();
        }
    }, 50);
}
</pre>
<h2 id="section-37">系统时间对象</h2>
new Date(); //当前 系统的时间 对象
<pre>var myTime = new Date(); //myTime的类型是object
var iYear = myTime.getFullYear(); //获得年份
</pre>
相关方法（以下得到的均为数字类型）：
<ul>
    <li>getFullYear()</li>
    <li>getMonth()</li>
    <li>getDate()</li>
    <li>getDay()</li>
    <li>getHours()</li>
    <li>getMinutes()</li>
    <li>getSeconds()</li>
</ul>
注意事项：
<ul>
    <li>用getMonth()得到的月份，一月是从0开始计算的。因此，例如当前为5月份，则用getMonth()得到的是4。</li>
    <li>用getDay()获得的星期几，得到的是一个数值。如果当前时间是星期天，则得到数字0。</li>
</ul>
<h3 id="date">Date对象参数</h3>
<ul>
    <li>数字形式：new Date(2013, 4 , 1 , 9 , 48 , 12); //年月日时分秒，注意月是从0开始算的。</li>
</ul>
<pre>var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0);
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';
</pre>
<ul>
    <li>天：Math.floor(t/86400)</li>
    <li>时：Math.floor(t%86400/3600)</li>
    <li>分：Math.floor(t%86400%3600/60)</li>
    <li>秒：t%60</li>
    <li>字符串形式：new Date('June 10, 2013 12:12:12');</li>
</ul>
<pre>var iNow = new Date();
var iNew = new Date('November 10, 2013 21:56:0');
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';
</pre>
<h3 id="section-38">时间戳</h3>
getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数
<h2 id="section-39">字符串操作</h2>
<h3 id="section-40">字符串获取类、封装检测数字的方法</h3>
<ul>
    <li>
<strong>.length</strong> 空格也算长度</li>
    <li>
<strong>.charAt()</strong> 找到子字符串。括号中什么也不写，默认找第0个。如果超过字符串长度减1，则返回空</li>
    <li>
<strong>.charCodeAt()</strong> 得到指定子字符的unicode编码。括号中什么也不写，默认找到第0个字符的unicode值，括号中最小为0，最大为字符串长度减1</li>
    <li>
<strong>String.fromCharCode();</strong> 根据字符编码，返回一个字符。例如String.fromCharCode(22937);返回的是"妙"字；要得到多个字符，可以用逗号将不同字符编码隔开，例如：String.fromCharCode(22937, 21916);返回的就是"妙味"两个字。0～9 => 48～57；a~z => 97~122；A~Z => 65~90</li>
</ul>
<pre>alert(detectNum(' 1a23d456'));
function detectNum(str){
    var n = 0;
    for(var i=0; i&lt;str.length; i++){
        n = str.charAt(i);
        if( n &lt; 48 || n &gt; 57 ) {
            return false;
        }
    }
    return true;
}
</pre>
<h3 id="indexoflastindexof">indexOf、lastIndexOf</h3>
<ul>
    <li>
<strong>.indexOf()</strong> 返回某个字符或字符串在整个字符串中的位置 str.indexOf('m', 5)代表在str字符串中的第5位开始往后找字符m的位置。如果用indexOf()来找，找不到，则返回-1。从左往右找。如果第二个参数为负数，则默认当成0来处理。</li>
</ul>
<pre>var str = '菜鸟教程 - 学的不仅是技术，更是梦想！'；
var s = '菜鸟教程';
var i = 0;

for ( ; str.indexOf(s, i) != -1; ){
    alert(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
}

或

while(str.indexOf(s, i) != -1) {
    alert(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
}
</pre>
<ul>
    <li>
<strong>.lastIndexOf()</strong> 从右往前找，也可以带数字参数，表示从哪里开始往前找。</li>
</ul>
<h3 id="section-41">比较类、截取类</h3>
<ul>
    <li>字符串的大小比较，比较的就是字符串第0位的字符的unicode编码</li>
    <li>
<strong>.substring(n, m)</strong> 截取从第n位起，到m位结束的字符。如果没有m，就默认截取到最后一位。str.substring(2, 0);和str.substring(0, 2);的结果是一样的。substring可以检测里面两个参数的大小，如果后面的参数小于前面的参数，它就把这两个参数自动颠倒过来。如果括号里面什么参数都没有，就相当于从0位截取到最后一位，也就是整个字符串。如果参数中有负数的话，就当做0处理。</li>
    <li>
<strong>.slice(n, m)</strong> str.slice(0, 2)和str.slide(2, 0)结果不一样。后者找不到结果，因为.slice()方法，不会判断里面参数的大小并交换参数位置。str.slice(-2);截取的是从最后一位截取到倒数第二位。-1代表的是最后一位字符串。str.slice(-4, -2);截取的是倒数第四位到倒数第二位的字符串。</li>
</ul>
<h3 id="split">大小写转换、split分割字符串</h3>
<ul>
    <li>
<strong>.toUpperCase()</strong> 转换成大写</li>
    <li>
<strong>.toLowerCase()</strong> 转换成小写</li>
    <li>
<strong>.split()</strong> 将字符串分割为数组。var str = 'www.miaov.com'; str.split('.'); => ["www", "miaov", "com"]；var str1 = 'leo'; str1.split(); => ['leo']；str2 = 'leo'; str2.split(''); => ["l", "e", "o"]；var str3 = '/www.miaov.com/'; str3.split('/'); => ["", "www.miaov.com", ""]；var str4 = '2013-11-29-23-07'; str4.split('-', 3); => ["2013", "11", "29"]</li>
    <li>
<strong>.join()</strong>方法 用来把数组中的各个东西拼到一块儿。var arr = ['aa', 'bb', 'cc]; arr.join(); => 'aa,bb,cc' .join()括号中什么也不写，默认就是用逗号隔开。arr.join(''); => 'aabbcc' ； arr.join('-'); => 'aa-bb-cc'</li>
</ul>
<h3 id="section-42">字符串操作总结</h3>
<pre>var str = '菜鸟教程-www.runoob.com';

str.charAt(1); // 3
str.charCodeAt(1); // 51
String.fromCharCode(119, 51); // w3

str.indexOf('c', 3); // 4
str.lastIndexOf('o'); // 25

'1000' &lt; '2' // true
'1000' &gt; 2 // true

str.substring(0, 4); // 菜鸟教程
str.slice(-3); // .cc

str.toUpperCase(); // 菜鸟教程-WWW.RUNOOB.COM
str.toLowerCase(); // 菜鸟教程-www.runoob.com

str.split('.', 2); // ["菜鸟教程-www", "runoob"]

var arr = ['www', 'runoob', 'com'];
arr.join('.'); // www.runoob.com
</pre>
<h2 id="section-43">数组的操作</h2>
<h3 id="json">json数据格式及语法</h3>
<pre>var json = { name: 'leo', age: 32};
alert(json.name);

var imgData = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};
alert(imgData.url[1]);

var json2 = { 'name': 'miaov' }; //推荐的安全格式的写法
alert(json2.name);
alert(json2['name']);
json2.name = 'abc';
json2['name'] = '妙味'; //注意中括号里面要用引号

var arr = [{'name': 'TM', 'age': 23}, {'name': 'leo', 'age': 32}];
alert(arr[0].name);
</pre>
<h3 id="for-injson">for-in循环，遍历json</h3>
<pre>var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
    alert(attr);
    alert(json4[attr]);
}

var json5 = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};

for(var attr in json5) {
    for(var i=0; i&lt;json5[attr].length; i++){
        alert(json5[attr][i]);
    }
}
</pre>
for-in也可以遍历对象属性：
<pre>var str = '';
var num = 0;
for(var attr in window){
    str += num + '. ' + attr + ' : ' + window[attr] + '&lt;br/&gt;';
    num ++;
}
document.body.innerHTML = str;
</pre>
数组也可以用for-in来遍历：
<pre>var arr = ['a', 'b', 'c'];
for(var i in arr){
    alert(arr[i]);
}
</pre>
<h3 id="section-44">清空数组和清空数组效率问题</h3>
<pre>// var arr = [1, 2, 3];
// var arr = new Array(1, 2, 3);

var arr = new Array(4);
alert(arr.length); // 4 在new Array()里面写了一个数字，就是定义了arr的长度
</pre>
<pre>var arr = [1, 2, 3];
arr.length = 1; //数组的length属性是可写的
alert(arr);
</pre>
<pre>var arr = [1, 2, 3];
arr.length = 0; //快速清空数组arr
或
arr = []; //通过重新赋值来清空数组，效率更高
</pre>
<pre>var str = 'aaaaa';
str.length = 1;
alert(str); // 'aaaaa'
//字符串的length属性不可写，但是数组的length属性可写
</pre>
<h3 id="section-45">数组的操作</h3>
<strong>添加</strong>
<ul>
    <li>push方法：arr.push(); 往数组最后一位添加内容。.push()方法是有返回值的，返回的是数组新的长度</li>
    <li>unshift方法：arr.unshift(); 往数组的最前面添加内容，返回值为数组新的长度（IE6、7不支持unshift的返回值）</li>
</ul>
<strong>删除</strong>
<ul>
    <li>pop方法：arr.pop(); 删除数组的最后一个，返回值是被扔掉的值</li>
    <li>shift方法：arr.shift(); 删除数组的第一个，返回值是被扔掉的值</li>
</ul>
<strong>小技巧</strong>
<pre>var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
arr.unshift(arr.pop()); //数组变为：['Leo', '钟毅', '张森', '杜鹏', 'TM']
或
arr.push(arr.shift()); //数组变为：['钟毅', '张森', '杜鹏', 'Leo', 'TM']
</pre>
<strong>splice方法</strong>
<ul>
    <li>splice方法有删除、替换、添加三种功能</li>
</ul>
<pre>var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
//删除
//arr.splice(0, 1); //删掉第0位，删1个。两个参数第一个是从第几位开始，第二个是删掉几个。splice删除的时候有返回值，返回的是被删除的内容
//替换
//arr.splice(0, 1, '莫涛'); //替换第0位，替换1个，替换为'莫涛'。返回的还是删除的东西
//添加
arr.splice(1, 0, '李贤'); //在第1位那里，删除0个，添加了一个'李贤'到了第1位，'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个，那么就没有返回值。
</pre>
<h3 id="section-46">数组去重</h3>
<pre>var arr = [1, 2, 2, 4, 2];
for ( var i=0; i&lt;arr.length; i++ ) {
    for ( var j = i+1; j&lt;arr.length; j++) {
        if( arr[i]==arr[j] ){
            arr.splice( j, 1 );
            j--;
        }
    }
}
</pre>
<strong>sort排序</strong>
<pre>var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序

var arr2 = [4, 3, 5, 76, 2, 0, 8];
// arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的，因此出现了76排在8前面的情况

// arr2. sort(function( a, b ){
    return a - b; //如果a-b返回正数，就a、b两个数字换个序。如果a-b是负数，就不换序
}) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76

// arr2. sort(function( a, b ){
    return b - a;
}) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0
</pre>
其他排序方法：
<ul>
    <li>快速排序法</li>
    <li>希尔排序法</li>
    <li>冒泡排序法</li>
    <li>归并排序法</li>
    <li>选择排序法</li>
    <li>插入排序法</li>
</ul>
<pre>var arrWidth = ['345px', '23px', '10px', '1000px'];
arrWidth.sort(function(a, b){
    return parseInt(a) - parseInt(b);
}); // ['10px', '23px', '345px', '1000px']
</pre>
<strong>随机排序</strong>
<pre>var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(function(a, b){
    return Math.random(); - 0.5;
});
</pre>
<h3 id="section-47">随机数以及随机公式推理过程</h3>
Math.random(); 返回0~1之间随机的一个数

如果想要随机返回0和1之间的一个整数，可以用四舍五入的方法：

Math.round(Math.random()); //注意，这里不能用Math.floor

如果想要返回0~10之间的一个随机数：

Math.round(Math.random() * 10); //返回0~10之间的随机整数

返回从20~100之间的一个随机数：

Math.round( Math.random()*80 + 20 ); //返回5~10之间的随机整数

如果想要返回一个x到y之间的整数，可以写成：

Math.round( Math.random() * (y - x) + x );

返回0~x的整数，可以写成

Math.round( Math.random() * x );

返回1~x的整数，可以写成

Math.ceil( Math.random() * x ); //Math.ceil()是向上取整

<strong>concat方法</strong>

concat方法用于连接数组。
<pre>var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];

arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
</pre>
<strong>reverse方法</strong>

reverse方法是颠倒数组中的位置，会改变原数组
<pre>var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]
</pre>
<pre>var str = 'abcdef';
alert(str.split('').reverse().join('')); //'fedcba'</pre>
<h2>参考资料</h2>
<p>更多教程可以访问我们的：<a href="../js/js-tutorial.html">JavaScript 教程</a>。
				</div>
			</div>
			<div class="previous-next-links">
			<div class="previous-design-link">← <a href="../w3cnote/php-xml2json.html" rel="prev"> PHP XML 与 JSON 相互转换</a> </div>
			<div class="next-design-link"><a href="../w3cnote/windows8-mysql56.html" rel="next"> Windows8下MySQL 5.6安装及配置图解教程</a> →</div>
			</div>
			<style>
.wrapper {
  /*text-transform: uppercase; */
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  white-space: nowrap;
  font-size: 14px;
  text-align: left;
  background: #96b97d;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 14px;
  pointer-events: none;
  position: absolute;
  
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.tooltip a {
	color:#fff;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #96b97d 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 20%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
.wrapper .tooltip1 {
	margin-left: 50px;
	padding-top: 0px;
}
/*
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}
*/
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

</style>

<link rel="stylesheet" href="../0/upvotejs.css">
<script src=""></script>
<script src=""></script>
<div id="respond" class="no_webshot"> 
		<div class="comment-signarea" style=" padding: 20px 20px;"> 
	<h3 class="text-muted" id="share_code" style="color: #799961;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 点我分享笔记</h3>
	<!--
	<p style="font-size:14px;">笔记需要是本篇文章的内容扩展！</p><br>
	<p style="font-size:12px;"><a href="../tougao" target="_blank">文章投稿，可点击这里</a></p>
	<p style="font-size:14px;"><a href="../w3cnote/runoob-user-test-intro.html#invite" target="_blank">注册邀请码获取方式</a></p>
		<h3 class="text-muted"><i class="fa fa-info-circle" aria-hidden="true"></i> 分享笔记前必须<a href="javascript:;" class="runoob-pop">登录</a>！</h3>
		<p><a href="../w3cnote/runoob-user-test-intro.html#invite" target="_blank">注册邀请码获取方式</a></p>-->
	</div>
		
	<form action="/wp-content/themes/runoob/option/addnote.php" method="post" id="commentform" style="display:none;">
		<div class="comt">
			<div class="comt-title">
				<i style="font-size:36px;" class="fa fa-user-circle" aria-hidden="true"></i>				<p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p>
			</div>
			<div class="comt-box">
			<div id="mded"></div>
			
				<div class="comt-ctrl">
					<div class="comt-tips"><input type='hidden' name='comment_post_ID' value='11994' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</div>
					<button type="submit" name="submit" id="submit" tabindex="5"><i class="fa fa-pencil" aria-hidden="true"></i> 分享笔记</button>
				</div>
			</div>
		
				
					<div class="comt-comterinfo"> 
						<ul id="comment-author-info">
							<li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li>
							<li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li>
							<li class="form-inline"><label class="hide" for="url">引用地址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="引用地址"><span class="text-muted">引用地址</span></li>
						</ul>
					</div>
				
			
		</div>

	</form>
	</div>
<script type="text/javascript">
$(function() {
	//初始化编辑器
	
	var editor = new Simditor({
	  textarea: $('#mded'),
	  placeholder: '写笔记...',
	  upload:false,
	 // upload: {url:'/api/comment_upload_file.php',params: null,fileKey: 'upload_file',connectionCount: 1,leaveConfirm: '文件正在上传，您确定离开?'},
	  defaultImage: 'https://www.runoob.com/images/logo.png',
	  codeLanguages: '',
	  autosave: 'editor-content',
	  toolbar: [  'bold','code','ul','ol','image' ]
	});
	editor.on('selectionchanged', function() {
		$(".code-popover").hide();
	});

	// 提交数据
	$("#share_code").click(function() {
		$(".comment-signarea").hide();
		$("#commentform").show();
		
	});
	$("#user_add_note").click(function() {
		$(".comment-signarea").hide();
		$("#commentform").show();
		$('html, body').animate({
       	    scrollTop: $("#respond").offset().top
    	}, 200);
	});

	// 提交笔记
	var commentform=$('#commentform');
	commentform.prepend('<div id="comment-status" style="display:none;" ></div>');
	var statusdiv=$('#comment-status');
	
	commentform.submit(function(e){
		e.preventDefault();
		var noteContent = editor.getValue();
		// console.log(noteContent);
		noteContent = noteContent.replace(/<pre><code>/g,"<pre>");
		noteContent = noteContent.replace(/<\/code><\/pre>/g,"</pre>");
		
		// 系列化表单数据
		var comment_parent = 0;
		var is_user_logged_in = $("#is_user_logged_in").val();
		var comment_post_ID =  11994;
		var _wp_unfiltered_html_comment = $("#_wp_unfiltered_html_comment").val();
		var comment = noteContent;
		var author = $("#author").val();
		var url = $("#url").val();
		var email = $("#email").val();
		if(isBlank(author) && is_user_logged_in==0) {
			statusdiv.html('<p  class="ajax-error">请输入昵称！</p>').show();
		} else if(isBlank(email)  && is_user_logged_in==0) {
			statusdiv.html('<p  class="ajax-error">请输入邮箱！</p>').show();
		} else {
			// var formdata=commentform.serialize() + "&comment=" + noteContent ;
			// 添加状态信息
			statusdiv.html('<p>Processing...</p>').show();
			// 获取表单提交地址
			var formurl=commentform.attr('action');
			
			// 异步提交
			$.ajax({
					type: 'post',
					url: formurl,
					dataType:'json',
					data: {"comment_parent":comment_parent,"comment_post_ID":comment_post_ID, "_wp_unfiltered_html_comment":_wp_unfiltered_html_comment,"comment":comment,"url":url, "email":email,"author":author},
					error: function(XMLHttpRequest, textStatus, errorThrown){
					statusdiv.html('<p class="ajax-error" >数据不完整或表单提交太快了！</p>').show();
				},
				success: function(data, textStatus){
					if(data.errorno=="0") {
						$("#submit").prop('disabled', true);
						statusdiv.html('<p class="ajax-success" >笔记已提交审核，感谢分享笔记！</p>').show();
						alert('笔记已提交审核，感谢分享笔记！');
					}else{
						statusdiv.html('<p class="ajax-error" >'+data.msg+'</p>').show();
					}
					commentform.find('textarea[name=comment]').val('');
				}
			});
			setTimeout(function(){
		        $("#submit").prop('disabled', false);
		    }, 10*1000);
		}
		return false;

	});
	$(".comt-author").click(function() {
		href = $(this).children("a").attr("href");
		if(href.indexOf("/note/")!=-1) {
			var win = window.open(href, '_blank');
  			win.focus();
		}
	});
	$(".comt-meta span").hover(function(){
		$(this).children(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
	},function(){
		$(this).children(".tooltip").removeAttr("style");
	});
	/*
	$(".wrapper i").hover(function(){
		$(this).siblings(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
	},function(){
		$(this).siblings(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
	});
	*/
	//Upvote.create('runoobvote-id', {callback: vote_callback});
	var ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';
	var callback = function(data) {
		//console.log($('#runoobvote-id').upvote('upvoted'));
		//console.log($('#runoobvote-id').upvote('downvoted'));
		//console.log(data);
		_vote_action = data.action;
		id_arr = data.id.split('-');
		um_id= id_arr[2];
		//console.log(um_id);
		
		var re = /^[1-9]+/;
		if (re.test(um_id)) { 
			var ajax_data = {
				_vote_action: _vote_action,
				action: "pinglun_zan",
				um_id: um_id,
				um_action: "ding"
			};
			//console.log(ajax_data);
			$.post(ajaxurl,ajax_data,function(status){
				//if(status.vote_num>999) {
				//	_voteHtml = '<span style="display: block; text-align: center;font-size: 20px; color: #6a737c; margin: 8px 0;">'+kFormatter(status.vote_num) +'</span>';
				//	$("#runoobvote-id-" + um_id + " .count").hide().after(_voteHtml);
				//}
				
			});
		}
	};
	if($('#comments').length && $('.upvotejs').length){
		$('.upvotejs').upvote({id: 11994, callback: callback});
	
		$.post(ajaxurl,{"action":"pinglun_zan","postid":11994},function(data){  
			$(data).each(function(key,value) {
				$("#runoobvote-id-" + value.commid + " .upvote").addClass(value.upvotejs_class);
				$("#runoobvote-id-" + value.commid + " .downvote").addClass(value.downvote_class);
				$("#runoobvote-id-" + value.commid + " .count").text(value.upvote_count);
			})
		},'json');
		
	}
	
	
});
function isBlank(str) {
    return (!str || /^\s*$/.test(str));
}
function kFormatter(num) {
	// return num;
    return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
}

</script>

<link rel="stylesheet" href="../0/qa.css?1.44">
<link rel="stylesheet" type="text/css" href="../0/simditor.min.css" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
			<div class="article-heading-ad" id="w3cnote-ad728">
			<script async src=""></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="horizontal"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
			</div>
			<style>
@media screen and (max-width: 768px) {
	#w3cnote-ad728 {
		display: none;
	}
}
p.note-author {
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #78a15a;
    padding-bottom: 2px;
    margin-bottom: 4px;
}
</style>
<script>
var aid = 11994;
</script>
	</div>
		
	</div>
	<div class="listcol last right-column">




<!--
	<div class="tab tab-light-blue"> 订阅</div>
	<div class="sidebar-box">
		<div class="socialicons">
			<a href="../feed" class="rss">RSS 订阅</a>
		
			<form action="//list.qq.com/cgi-bin/qf_compose_send" method="post">
			<input type="hidden" value="qf_booked_feedback" name="t">
			<input type="hidden" value="4b67b6b6c1f5e792559940cab4aebb8f1126fba880bff1a8" name="id">
			<input class="placeholder" id="feed_email" name="to" value="输入邮箱 订阅笔记" autocomplete="off">
			<input type="submit" value="订阅" class="btn btn-primary">
			</form>
		
		</div>
 
	</div>
-->	



<!--
	<div class="sidebar-box cate-list">
	<div class="sidebar-box recommend-here list-link">
			<a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">笔记列表</a>
		</div>

 

</div>
-->

	 <div class="sidebar-box cate-list">
		 		

	 	<div class="sidebar-box recommend-here list-link">
			<a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">教程列表</a>
		</div>
		
		<div class="cate-items"> 
				<a href="../ado">ADO 教程</a>
	<a href="../ajax">Ajax 教程</a>
	<a href="../android">Android 教程</a>
	<a href="../angularjs2">Angular2 教程</a>
	<a href="../angularjs">AngularJS 教程</a>
	<a href="../appml">AppML 教程</a>
	<a href="../asp">ASP 教程</a>
	<a href="../aspnet">ASP.NET 教程</a>
	<a href="../bootstrap">Bootstrap 教程</a>
	<a href="../bootstrap4">Bootstrap4 教程</a>
	<a href="../bootstrap5">Bootstrap5 教程</a>
	<a href="../cprogramming">C 教程</a>
	<a href="../csharp">C# 教程</a>
	<a href="../cplusplus">C++ 教程</a>
	<a href="../chartjs">Chart.js 教程</a>
	<a href="../cssref">CSS 参考手册</a>
	<a href="../css">CSS 教程</a>
	<a href="../css3">CSS3 教程</a>
	<a href="../django">Django 教程</a>
	<a href="../docker">Docker 教程</a>
	<a href="../dtd">DTD 教程</a>
	<a href="../echarts">ECharts 教程</a>
	<a href="../eclipse">Eclipse 教程</a>
	<a href="../firebug">Firebug 教程</a>
	<a href="../font-awesome">Font Awesome 图标</a>
	<a href="../foundation">Foundation 教程</a>
	<a href="../git">Git 教程</a>
	<a href="../go">Go 语言教程</a>
	<a href="../googleapi">Google 地图 API 教程</a>
	<a href="../highcharts">Highcharts 教程</a>
	<a href="../htmldom">HTML DOM 教程</a>
	<a href="../tags">HTML 参考手册</a>
	<a href="../charsets">HTML 字符集</a>
	<a href="../html">HTML 教程</a>
	<a href="../http">HTTP 教程</a>
	<a href="../ionic">ionic 教程</a>
	<a href="../ios">iOS 教程</a>
	<a href="../java">Java 教程</a>
	<a href="../jsref">JavaScript 参考手册</a>
	<a href="../js">Javascript 教程</a>
	<a href="../jeasyui">jQuery EasyUI 教程</a>
	<a href="../jquerymobile">jQuery Mobile 教程</a>
	<a href="../jqueryui">jQuery UI 教程</a>
	<a href="../jquery">jQuery 教程</a>
	<a href="../json">JSON 教程</a>
	<a href="../jsp">JSP 教程</a>
	<a href="../julia">Julia 教程</a>
	<a href="../kotlin">Kotlin 教程</a>
	<a href="../linux">Linux 教程</a>
	<a href="../lua">Lua 教程</a>
	<a href="../markdown">Markdown 教程</a>
	<a href="../matplotlib">Matplotlib 教程</a>
	<a href="../maven">Maven 教程</a>
	<a href="../memcached">Memcached 教程</a>
	<a href="../mongodb">MongoDB 教程</a>
	<a href="../mysql">MySQL 教程</a>
	<a href="../nodejs">Node.js 教程</a>
	<a href="../numpy">NumPy 教程</a>
	<a href="../pandas">Pandas 教程</a>
	<a href="../perl">Perl 教程</a>
	<a href="../php">PHP 教程</a>
	<a href="../postgresql">PostgreSQL 教程</a>
	<a href="../python3">Python 3 教程</a>
	<a href="../python">Python 基础教程</a>
	<a href="../r">R 教程</a>
	<a href="../rdf">RDF 教程</a>
	<a href="../react">React 教程</a>
	<a href="../redis">Redis 教程</a>
	<a href="../rss">RSS 教程</a>
	<a href="../ruby">Ruby 教程</a>
	<a href="../rust">Rust 教程</a>
	<a href="../sass">Sass 教程</a>
	<a href="../scala">Scala 教程</a>
	<a href="../scipy">SciPy 教程</a>
	<a href="../servlet">Servlet 教程</a>
	<a href="../soap">SOAP 教程</a>
	<a href="../sql">SQL 教程</a>
	<a href="../sqlite">SQLite 教程</a>
	<a href="../svg">SVG 教程</a>
	<a href="../svn">SVN 教程</a>
	<a href="../swift">Swift 教程</a>
	<a href="../tcpip">TCP/IP 教程</a>
	<a href="../typescript">TypeScript 教程</a>
	<a href="../vbscript">VBScript 教程</a>
	<a href="../vue2">Vue.js 教程</a>
	<a href="../vue3">Vue3 教程</a>
	<a href="../w3c">W3C 教程</a>
	<a href="../webservices">Web Service 教程</a>
	<a href="../wsdl">WSDL 教程</a>
	<a href="../xlink">XLink 教程</a>
	<a href="../dom">XML DOM 教程</a>
	<a href="../schema">XML Schema 教程</a>
	<a href="../xml">XML 教程</a>
	<a href="../xpath">XPath 教程</a>
	<a href="../xquery">XQuery 教程</a>
	<a href="../xslfo">XSLFO 教程</a>
	<a href="../xsl">XSLT 教程</a>
	<a href="../data-structures">数据结构</a>
	<a href="../regexp">正则表达式</a>
	<a href="../quiz">测验</a>
	<a href="../browsers">浏览器</a>
	<a href="../quality">网站品质</a>
	<a href="../web">网站建设指南</a>
	<a href="../hosting">网站服务器教程</a>
	<a href="../design-pattern">设计模式</a>
			
		</div> 
		 	 </div>
</div>
	</div>
</div>


<!-- 底部 -->
<div id="footer" class="mar-t50">
   <div class="runoob-block">
    <div class="runoob cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a target="_blank" href="../html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a target="_blank" href="../jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a target="_blank" href="../charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="../tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a target="_blank" href="https://c.runoob.com/front-end/6939/">JS 混淆/加密</a>
      </dd> 
      <dd>
       &middot; <a target="_blank" href="https://c.runoob.com/front-end/6232/">PNG/JPEG 图片压缩</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="../tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="..//c.runoob.com/front-end/53">JSON 格式化工具</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="..//c.runoob.com/front-end/6680/">随机数生成器</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imread.html" title="Matplotlib imread() 方法">Matplotlib imre...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imsave.html" title="Matplotlib imsave() 方法">Matplotlib imsa...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imshow.html" title="Matplotlib imshow() 方法">Matplotlib imsh...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-hist.html" title="Matplotlib 直方图">Matplotlib 直方图</a>
      </dd>
              <dd>
       &middot;
      <a href="../python3/python-func-object.html" title="Python object() 函数">Python object()...</a>
      </dd>
              <dd>
       &middot;
      <a href="../python3/python-ai-draw.html" title="Python AI 绘画">Python AI 绘画</a>
      </dd>
              <dd>
       &middot;
      <a href="../w3cnote/cursor-editor.html" title="神辅助 Cursor 编辑器，加入 GPT-4 让编码更轻松！">神辅助 Cursor ...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="mailto:admin@runoob.com" rel="external nofollow">意见反馈</a>
       </dd>
      <dd>
       &middot;
      <a target="_blank" href="../disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a target="_blank" href="../aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a target="_blank" href="../archives">文章归档</a>
      </dd>
    
     </dl>
    
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="128" height="128" src="/wp-content/themes/runoob/assets/images/qrcode.png" />
       </div>
     </div>
     
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2023    <strong><a href="../" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="../" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">闽ICP备15012807号-1</a>
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" style="display:none" href="javascript:void(0)"   title="标记/收藏"><i class="fa fa-star" aria-hidden="true"></i></a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="/wp-content/themes/runoob/assets/images/qrcode.png"></div> 
    </div>
  </div>

 <div style="display:none;">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-84264393-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-84264393-2');
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</div>
<script>
window.jsui={
    www: 'https://www.runoob.com',
    uri: 'https://www.runoob.com/wp-content/themes/runoob'
};
</script>

<script src=""></script>
<script src=""></script>

</body>
</html>